@extends('backend.layouts.base')
@section('title', '插件管理')
@section('content')
    <style>
    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-crumbs">
                插件 > 插件管理
            </div>
            <div class="vue-head">
                <div class="vue-main-title" style="margin-bottom:20px">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">
                        插件管理
                    </div>
                    <div class="vue-main-title-right">
                        @if(\YunCms::autoUpdate())
                            <el-button type="primary"><a href="{{absolute_admin_url('sys.pluginMarket.index')}}" style="color:#fff;">插件安装</a></el-button>
                        @endif
                    </div>
                </div>
                <div class="vue-search">
                    <el-form :inline="true" :model="search_form" class="demo-form-inline">
                        <el-input placeholder="请输入插件名称" v-model="search_form.title"  style="width:15%;margin-right:15px;"></el-input>
                        <template>
                            <el-select placeholder="是否授权" clearable v-model="search_form.permit_status"  style="margin-right:15px;">
                                <el-option
                                        v-for="item in permit"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <template>
                            <el-select placeholder="全部状态" clearable v-model="search_form.status"  style="margin-right:15px;">
                                <el-option
                                        v-for="item in action"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <template>
                            <el-select placeholder="是否可升级" clearable v-model="search_form.update_status"  style="margin-right:15px;">
                                <el-option
                                        v-for="item in update"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <el-form-item label="">
                            <el-button type="primary" @click="search">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div  style="margin-top:20px;">
                    <el-button type="primary" class="btn-one" @click="allChoose">全选</el-button>
                    <el-button type="primary" class="btn-one" @click="allOpen">批量启用</el-button>
                    <el-button type="danger" class="btn-two" @click="allClose">批量禁用</el-button>
                    <el-button type="danger" class="btn-two" @click="allDelete">批量卸载</el-button>
                </div>
            </div>
            <div class="vue-main">
                <div class="vue-main-form">
                    <div class="vue-main-title" style="margin-bottom:20px">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content" style="flex:0 0 130px">插件列表</div>
                        <div class="" style="text-align:left;font-size:14px;color:#999">
                            <span>插件数量：[[total]] 已授权插件：[[total-un_permit_plugin]] 未授权插件：[[un_permit_plugin]]</span>&nbsp;&nbsp;&nbsp;
                        </div>
                        <div class="vue-main-title-button">
                        </div>
                    </div>
                    <el-table :data="list" style="width: 100%">
                        <el-table-column
                                align="center"
                                label="选择"
                                width="100">
                            <template slot-scope="scope">
                                <el-checkbox  v-model="scope.row.choose" @change="getStatus(scope.row)" :disabled = " scope.row.name=='plugins-market' " ></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                align="center"
                                label="插件名称"
                                label="100">
                        </el-table-column>
                        <el-table-column
                                prop="version"
                                align="center"
                                label="当前版本"
                                label="100">
                        </el-table-column>
                        <el-table-column
                                prop="new_version"
                                align="center"
                                label="最新版本"
                                label="100">
                            <template slot-scope="scope" >
                                [[scope.row.new_version]]
                                <span style="margin-left:5px;color:#29BA9C;" v-if="scope.row.update">可升级</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="permit_status"
                                align="center"
                                label="是否授权"
                                label="100">
                            <template slot-scope="scope" >
                                <div v-if="scope.row.permit_status=='已授权'" style="color:#29BA9C;">已授权</div>
                                <div v-if="scope.row.permit_status=='未授权'" style="color:red;">未授权</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="状态"
                                label="100">

                            <template slot-scope="scope" >
                                <el-switch
                                        @change="changeStatus(scope.row)"
                                        v-model="scope.row.status"
                                >
                                </el-switch>
                            </template>

                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                label="100">
                            <template slot-scope="scope" >
                                <el-button type="danger" @click="deletePlugin(scope.row)"  :disabled = " scope.row.name=='plugins-market' " >卸载</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    list:[],
                    search_form:{
                        title:'',
                        permit_status:'',
                        status:'',
                        update_status:''
                    },
                    rules: {},
                    current_page:1,
                    total:1,
                    per_page:1,
                    un_permit_plugin:0,
                    permit: [
                        {
                            value: '已授权',
                            label: '已授权'
                        },
                        {
                            value: '未授权',
                            label: '未授权'
                        },
                    ],
                    permit: [
                        {
                            value: '已授权',
                            label: '已授权'
                        },
                        {
                            value: '未授权',
                            label: '未授权'
                        },
                    ],
                    permit: [
                        {
                            value: '已授权',
                            label: '已授权'
                        },
                        {
                            value: '未授权',
                            label: '未授权'
                        },
                    ],
                    action: [
                        {
                            value: 'enable',
                            label: '启用'
                        },
                        {
                            value: 'disable',
                            label: '禁用'
                        },
                    ],
                    update: [
                        {
                            value: '可升级',
                            label: '可升级'
                        },
                    ],

                }
            },
            created() {

            },
            mounted() {
                this.getData(0);
            },
            methods: {
                getData(is_search) {
                    let json = {
                        title:this.search_form.title,
                        permit_status:this.search_form.permit_status,
                        status:this.search_form.status,
                        update_status:this.search_form.update_status,
                    };
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! absolute_admin_url('sys.plugin.getList') !!}',{is_search:is_search,search:json}).then(function(response) {
                        if (response.data.result) {
                            this.list = response.data.data.list;
                            this.total= response.data.data.countPlugin;
                            this.un_permit_plugin = response.data.data.unPermitPlugin;
                            loading.close();

                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                        loading.close();

                    }, function(response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                        loading.close();
                    });
                },
                getStatus(){
                    let arr=[]
                    this.list.forEach((item,index)=>{
                        arr.push(item)
                    })
                    this.list=arr
                    this.$forceUpdate()
                },
                changeStatus(item){
                    let json={
                        name:item.name,
                        action:item.status?'enable':'disable'
                    }
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});

                    this.$http.post('{!! absolute_admin_url('sys.plugin.manage') !!}',json).then(function (response){
                            if (response.data.result) {
                                this.$message({message:response.data.msg,type:"success"});
                                this.loading = false;
                            }else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                            let a = window.location.href+"&"+Math.floor((Math.random()*10)+1);;
                            window.location.href = a ;
                        },function (response) {
                            console.log(response);
                            this.loading = false;
                        }
                    );
                },
                allChoose() {
                    let arr=[]
                    if(!this.is_all_choose){
                        this.list.forEach((item,index)=>{
                            if(item.name !== 'plugins-market'){
                                item.choose=true
                            }
                            arr.push(item)
                            this.$forceUpdate()
                        })
                        this.is_all_choose=true
                    }else{
                        this.list.forEach((item,index)=>{
                            if(item.name !== 'plugins-market'){
                                item.choose=false
                            }
                            arr.push(item)
                            this.$forceUpdate()
                        })
                        this.is_all_choose=false
                    }
                    this.list=arr
                    this.$forceUpdate()
                },
                allClose(){
                    let vals=[]
                    this.list.forEach((item,index)=>{
                        if(item.choose){
                            vals.push(item.name)
                        }
                    })
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! absolute_admin_url('sys.plugin.batchMange') !!}',{names:vals.join(','),action:'disable'}).then(function (response){
                            if (response.data.result) {
                                this.$message({message:response.data.msg,type:"success"});
                                this.loading = false;
                            }else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                            location.reload();
                        },function (response) {
                            console.log(response);
                            this.loading = false;
                        }
                    );
                },
                allOpen(){
                    let vals=[]
                    this.list.forEach((item,index)=>{
                        if(item.choose){
                            vals.push(item.name)
                        }
                    })
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! absolute_admin_url('sys.plugin.batchMange') !!}',{names:vals.join(','),action:'enable'}).then(function (response){
                            if (response.data.result) {
                                this.$message({message:response.data.msg,type:"success"});
                                this.loading = false;
                            }else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                            location.reload();
                        },function (response) {
                            console.log(response);
                            this.loading = false;
                        }
                    );
                },
                allDelete(){
                    this.$confirm('卸载插件后,将删除插件文件、整站无法使用该插件!如插件已经停止供应，将无法再次安装! 是否继续?', '温馨提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let vals=[]
                        this.list.forEach((item,index)=>{
                            if(item.choose){
                                vals.push(item.name)
                            }
                        })
                        let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                        this.$http.post('{!! absolute_admin_url('sys.plugin.batchMange') !!}',{names:vals.join(','),action:'delete'}).then(function (response){
                                if (response.data.result) {
                                    this.$message({message:response.data.msg,type:"success"});
                                    this.loading = false;
                                }else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                                location.reload();
                            },function (response) {
                                console.log(response);
                                this.loading = false;
                            }
                        );
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消卸载'
                        });
                    });


                },
                search() {
                    this.getData(1);
                },
                deletePlugin(item){
                    this.$confirm('卸载插件后,将删除插件文件、整站无法使用该插件!如插件已经停止供应，将无法再次安装! 是否继续?', '温馨提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let json={
                            name:item.name,
                            action:'delete'
                        }
                        let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                        this.$http.post('{!! absolute_admin_url('sys.plugin.manage') !!}',json).then(function (response){
                                if (response.data.result) {
                                    this.$message({message:response.data.msg,type:"success"});
                                    this.loading = false;
                                }else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                                location.reload();
                            },function (response) {
                                console.log(response);
                                this.loading = false;
                            }
                        );
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消卸载'
                        });
                    });
                },
            },
        })
    </script>
@endsection